<template>
  <data-table-app-view :container-subtract-height="78">
    <el-form slot="toolbar" inline :model="searchForm">
      <el-form-item label="工单编号">
        <el-input v-model="searchForm.orderno" clearable style="width: 210px"></el-input>
      </el-form-item>
      <el-form-item label="工单状态">
        <type-select
          v-model="searchForm.statuses"
          :items="statusItems"
          style="width: 120px"
        />
      </el-form-item>
      <el-form-item label="支付状态">
        <type-select
          v-model="searchForm.payStatus"
          :items="DictMan.items('payStatus')"
          style="width: 90px"
        />
      </el-form-item>
      <el-form-item label="下单时间">
        <el-date-picker
          v-model="searchForm.createTimes"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          align="right"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          style="width: 320px"
        />
      </el-form-item>
      <el-form-item>
        <data-table-query-button :query-params="getQueryParams" />
      </el-form-item>
    </el-form>
    <data-table
      ref="table"
      :url="`/api/shop/stat/errorOrder?type=${type}`"
    >
      <el-table-column prop="orderno" label="工单号" width="190"></el-table-column>
      <el-table-column prop="status" label="工单状态" width="100" v-slot="{row}">
        <status-tag :status="row.status" type="service" />
      </el-table-column>
      <el-table-column prop="payStatus" label="支付状态" width="90" v-slot="{row}">
        <pay-status-tag :status="row.payStatus" />
      </el-table-column>
      <el-table-column prop="providerName" label="商家店铺" width="240" show-overflow-tooltip></el-table-column>
      <el-table-column prop="industryText" label="行业" width="80"></el-table-column>
      <el-table-column prop="handler" label="处理人" width="140" show-overflow-tooltip=""></el-table-column>
      <el-table-column prop="createTime" label="下单时间" width="152"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            @click="onDetailsClick(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </data-table>
  </data-table-app-view>
</template>

<script>
import StatusTag from '../StatusTag';
import PayStatusTag from '../PayStatusTag';

export default {
  components: {
    StatusTag,
    PayStatusTag
  },
  props: ['type'],
  data() {
    return {
      searchForm: {},
      statusItems: StatusTag.serviceOrderStatusItems
    };
  },
  methods: {
    getQueryParams() {
      let queryParams = {...this.searchForm};
      queryParams = {
        ...queryParams,
        ...(queryParams.createTimes ? {
            startCreateTime: queryParams.createTimes[0],
            endCreateTime: queryParams.createTimes[1]
          } : {})
      };
      delete queryParams.createTimes;
      return queryParams;
    },
    onDetailsClick(order) {
      this.pushPage({
        path: '/shop/order/details',
        params: {
          order,
          type: 'service',
          onDeleteSuccess: () => {
            this.$refs.table.reloadCurrentPage();
          }
        },
        key: order.orderno
      });
    }
  }
}
</script>